<template>
	<div class="receipt-detail-container">
		<h1>{{ $t('message.receipt_detail') }}</h1>
		<h2>{{ $t('message.receipt_read_users') }}</h2>
		<p>{{ readUsersDesc() }}</p>
		<h2>{{ $t('message.receipt_received_users') }}</h2>
		<p>{{ receivedUsersDesc() }}</p>
		<h2>{{ $t('message.receipt_unreceived_users') }}</h2>
		<p>{{ unreceiveUsersDesc() }}</p>
	</div>
</template>

<script>
	export default {
		name: 'MessageReceiptDetailView',
		props: {
			readUsers: {
				type: Array,
				required: true,
				default: null
			},
			receivedUsers: {
				type: Array,
				required: true,
				default: null
			},
			unreceiveUsers: {
				type: Array,
				required: true,
				default: null
			}
		},
		methods: {
			readUsersDesc() {
				let desc = ''
				if (this.readUsers) {
					this.readUsers.forEach((u) => {
						desc += u._displayName + '、'
					})
					desc = desc.substring(0, desc.length - 1)
				}
				return desc ? desc : this.$t('common.none')
			},
			receivedUsersDesc() {
				let desc = ''
				if (this.receivedUsers) {
					this.receivedUsers.forEach((u) => {
						desc += u._displayName + '、'
					})
					desc = desc.substring(0, desc.length - 1)
				}
				return desc ? desc : this.$t('common.none')
			},
			unreceiveUsersDesc() {
				let desc = ''
				if (this.unreceiveUsers) {
					this.unreceiveUsers.forEach((u) => {
						desc += u._displayName + '、'
					})
					desc = desc.substring(0, desc.length - 1)
				}
				return desc ? desc : this.$t('common.none')
			}
		}
	}
</script>

<style lang="less" scoped>
	.receipt-detail-container {
		padding: 10px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.receipt-detail-container h1 {
		align-self: center;
	}
</style>
